<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>心电图查看 - 可穿戴心电监测平台</title>
  <!-- TailwindCSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body class="bg-gray-100 font-sans min-h-screen">

  <!-- 🔵 顶部导航栏 -->
  <header class="bg-blue-600 text-white p-4 flex justify-between items-center shadow-md">
    <h1 class="text-xl font-semibold">🏥 可穿戴心电监测平台 - 心电图详情</h1>
    <div class="flex items-center space-x-4">
      <span>用户：<b>{{ username }}</b></span>
      <a href="/" class="bg-white text-blue-600 px-3 py-1 rounded hover:bg-gray-100 transition">主页面</a>
    </div>
  </header>

  <!-- 📊 主体内容 -->
  <main class="p-6 flex flex-col items-center">
    <div class="bg-white w-full max-w-5xl p-8 rounded-2xl shadow-lg">
      <h2 class="text-2xl font-semibold text-blue-600 mb-3">
        设备 {{ record.device_id }} 的心电记录
      </h2>
      <p class="text-gray-500 mb-6">
        记录编号：<b>{{ record.id }}</b><br>
        开始时间：{{ record.start_time }}<br>
        结束时间：{{ record.end_time or "进行中" }}
      </p>

      <!-- 心电图容器 -->
      <div class="w-full">
        <canvas id="ecgChart" height="240"></canvas>
      </div>
    </div>
  </main>

  <!-- 🔙 固定右下角返回主页面按钮 -->
  <a href="/"
     class="fixed bottom-6 right-6 bg-blue-600 text-white px-5 py-2 rounded-full shadow-lg hover:bg-blue-700 transition duration-200 z-50">
    🔙 返回主页面
  </a>

  <!-- 📈 心电数据绘制脚本 -->
  <script>
    const samples = {{ samples|tojson }};
    const labels = Array.from({length: samples.length}, (_, i) => i);

    const ctx = document.getElementById("ecgChart").getContext("2d");
    new Chart(ctx, {
      type: "line",
      data: {
        labels: labels,
        datasets: [{
          label: "ECG Signal",
          data: samples,
          borderColor: "rgb(37,99,235)",
          borderWidth: 1,
          pointRadius: 0,
          fill: false,
          tension: 0.2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            display: false
          },
          y: {
            beginAtZero: false,
            ticks: {
              color: "#6b7280"
            },
            grid: {
              color: "rgba(0,0,0,0.05)"
            }
          }
        },
        plugins: {
          legend: { display: false },
          tooltip: {
            mode: 'index',
            intersect: false,
            callbacks: {
              label: function(context) {
                return ' 电压: ' + context.parsed.y.toFixed(3) + ' mV';
              }
            }
          }
        },
        interaction: {
          intersect: false,
          mode: 'index'
        }
      }
    });
  </script>
</body>
</html>
